<template>
  <div>
    <el-drawer
      :title="title"
      :destroy-on-close="true"
      v-model="isShow"
      size="45%"
      @close="closeDra"
    >
      <el-form
        :model="fromData"
        ref="form"
        :rules="formRules"
        label-position="top"
        label-width="80px"
        :inline="false"
      >
        <el-row :gutter="20">
          <el-col :span="12" :offset="0">
            <el-form-item label="小区名称" prop="community_code">
              <el-select
                placeholder="请选择小区"
                style="width: 100%"
                v-model="fromData.community_code"
                clearable
              >
                <el-option
                  v-for="item in communityList"
                  :key="id"
                  :label="item.name"
                  :value="item.code"
                >
                  {{ item.name }}</el-option
                >
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-form-item label="设备名称" prop="name">
              <el-input
                v-model="fromData.name"
                placeholder="请输入设备名称"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12" :offset="0">
            <el-form-item label="品牌" prop="brand">
              <el-input
                v-model="fromData.brand"
                placeholder="请输入品牌"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-form-item label="价格" prop="price">
              <el-input
                v-model="fromData.price"
                placeholder="请输入价格"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12" :offset="0">
            <el-form-item label="购买数量" prop="quantity">
              <el-input
                v-model="fromData.quantity"
                placeholder="请输入购买数量"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-form-item label="购买时间" prop="buy_time">
              <el-date-picker
                v-model="defaultFormData.buy_time"
                type="date"
                placeholder="请输入购买时间"
                @change="timeChange"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12" :offset="0">
            <el-form-item label="预计使用年限" prop="durable_years">
              <el-input
                v-model="fromData.durable_years"
                placeholder="请输入预计使用年限"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-form-item label="备注">
              <el-input
                type="textarea"
                v-model="fromData.remark"
                placeholder="请输入备注"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="设备图片">
          <ImageUpload
            v-model="fromData.photo"
            :limit="1"
            :type="'adv'"
          ></ImageUpload>
        </el-form-item>
        <el-row :gutter="20" type="flex" justify="end">
          <el-form-item>
            <el-button type="primary" @click="onSubmit">提交</el-button>
            <el-button @click="isShow = false">取消</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </el-drawer>
  </div>
</template>

<script setup>
import { reactive, ref, toRaw } from "vue";
import { getCommunityList } from "@/api/community_yuan.js";
import {
  addDeviceAdList,
  getDeviceAdInfo,
  editDeviceAdList,
} from "@/api/device.js";
import { ElMessage } from "element-plus";

const isShow = ref(false);
const form = ref();
const communityList = ref([]);
const emit = defineEmits("updateList");

const initData = async () => {
  let { data } = await getCommunityList();
  communityList.value = data;
};

const defaultFormData = reactive({
  brand: "",
  buy_time: "",
  community_code: "",
  durable_years: "",
  name: "",
  photo: "",
  price: "",
  quantity: "",
  remark: "",
  id: null,
});
const fromData = reactive({ ...defaultFormData });

const formRules = ref({
  community_code: [
    { required: true, message: "请选择所属小区", trigger: "change" },
  ],
  buy_time: [{ required: true, message: "请选择购买时间", trigger: "change" }],
  name: [{ required: true, message: "请输入设备名称", trigger: "blur" }],
  brand: [{ required: true, message: "请输入品牌", trigger: "blur" }],
  price: [{ required: true, message: "请输入价格", trigger: "blur" }],
  quantity: [{ required: true, message: "请输入购买数量", trigger: "blur" }],
  durable_years: [
    { required: true, message: "请输入使用年限", trigger: "blur" },
  ],
  remark: [{ required: true, message: "请填写备注", trigger: "blur" }],
});

const timeChange = (val) => {
  fromData.buy_time = +new Date(val);
};

const title = computed(() => (fromData.id !== null ? "修改设备" : "添加设备"));

const onSubmit = async () => {
  try {
    await form.value.validate();
    const data = toRaw(fromData);
    data.price = +data.price;
    data.quantity = +data.quantity;
    data.durable_years = +data.durable_years;
    fromData.id !== null
      ? await editDeviceAdList(data)
      : await addDeviceAdList(data);
    ElMessage.success("提交成功");
    isShow.value = false;
    emit("updateList");
  } catch (error) {
    console.log(error);
  }
};

const replayInfo = async (id) => {
  let { data } = await getDeviceAdInfo(id);
  Object.assign(fromData, data);
  defaultFormData.buy_time = data.buy_time;
  isShow.value = true;
};

const closeDra = async () => {
  await nextTick(() => {
    form.value.resetFields();
  });
  Object.assign(fromData, { ...defaultFormData });
  defaultFormData.buy_time = "";
};

onMounted(() => {
  initData();
});

defineExpose({
  isShow,
  replayInfo,
});
</script>

<style scoped></style>
